<template>
  <xoFormItem :label="props.label" :tips="props.tips" :ruleMessage="props.ruleMessage">
    <div class="form-item-inline">
      <input class="grow" :class="model ? 'font-bold' : ''" :type="props.type" placeholder-style="color:#94a3b8"
        :placeholder="props.placeholder" :maxlength="props.maxLength" v-model="model" @blur="handleCheckRule" />
      <div v-if="props.maxLength" class="desc">{{ model && (model as string).length || 0 }}/{{ props.maxLength }}</div>
      <div v-if="model" class="icon text-emerald-500 i-mdi-close" @click="handleClickClear">
      </div>
    </div>
    <template #footer>
      <slot name="footer"></slot>
    </template>
  </xoFormItem>

</template>

<script setup lang='ts'>

import xoFormItem from './xoFormItem.vue'

interface IProps {
  label?: string
  type?: string
  tips?: string
  maxLength?: number
  placeholder?: string
  ruleMessage?: string
}

const props = withDefaults(defineProps<IProps>(), {
  label: '',
  type: 'text',
  tips: '',
  placeholder: '',
  ruleMessage: '',
})

const model = defineModel<string | number>()
const emit = defineEmits(['update:modelValue', 'onValid'])

const handleClickClear = () => {
  if (typeof model.value === 'number')
    model.value = 0
  else
    model.value = ''
  emit('onValid', model ? model.value : '')
}

const handleCheckRule = () => {
  emit('onValid', model ? model.value : '')
}

</script>

<style scoped></style>